<script setup>
import { ref } from 'vue'   
import commonSearchMenu from '@/components/CommonSearchMenu.vue';
import commonTable from '@/components/CommonTable.vue';
import commonContract from '@/components/CommonContract.vue'
import useDialogStore from '@/stores/dialog.js';
const dialogStore = useDialogStore();
const activeName = ref('first');
const table = ref({
    hasPage: true,
    tableColumn: { 
        shopProduct: { type: "text", text: "金融产品" },
        customerId: { type: "text", text: "客户ID" }, 
        outboundStatus: { type: "text", text: "外呼状态" }, 
        callTime: { type: "text", width: "150", text: "拨打时间" }, 
        marketingStatusNow: { type: "text", text: "当月营销结果" }, 
        marketingStatusBefore: { type: "text", text: "累计营销结果" }, 
        callStatus: { type: "text", text: "拨打状态" }, 
        operate: { type: "button", text: "外呼营销" } 
    },
    tableData: [
        { shopProduct: "乐E付存量", customerId: "37468439", outboundStatus: "无效", callTime: "2023-05-01 09:00:00", marketingStatusNow: "未营销成功", marketingStatusBefore: "未营销成功", callStatus: "未接通", operate: "外呼营销" },
        { shopProduct: "用呗", customerId: "13764283", outboundStatus: "无效", callTime: "2023-05-01 09:00:00", marketingStatusNow: "未营销成功", marketingStatusBefore: "首次成功", callStatus: "已接通", operate: "外呼营销" },
        { shopProduct: "黄金", customerId: "98969896", outboundStatus: "无效", callTime: "2023-05-01 09:00:00", marketingStatusNow: "未营销成功", marketingStatusBefore: "常态中", callStatus: "未接通", operate: "外呼营销" },
        { shopProduct: "钻石", customerId: "32334464", outboundStatus: "无效", callTime: "2023-05-01 09:00:00", marketingStatusNow: "未营销成功", marketingStatusBefore: "常态成功", callStatus: "未接通", operate: "外呼营销" }

    ],
    click: row => {
        dialogStore.openDialog(row.customerId);
    }
})
</script>
<template>
    <div class="container">
        <common-contract class="dialog" v-if="dialogStore.display"></common-contract>
        <el-tabs v-model="activeName">
            <el-tab-pane label="商户金融营销" name="first">
                <common-search-menu></common-search-menu>
                <common-table></common-table>
            </el-tab-pane>
            <el-tab-pane label="客户金融营销" name="second">
                <common-search-menu></common-search-menu>
                <common-table :table="table"></common-table>
            </el-tab-pane>
            <el-tab-pane label="其他特殊营销" name="third">
                <common-search-menu></common-search-menu>
                <common-table></common-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<style lang="scss" scoped>
.container {
    width: auto;
    height: 95%;
    padding: 5px;
    background-color: rgb(245, 245, 245);
    .dialog {
        position: fixed;
        top: -50%;
        z-index: 100; /* 设置为最大可能的整数值 */
    }
}
</style>